<template>
  <div class="Box_bj">
    <div class="bookshelf-container">
      <!-- Header Section -->
      <div class="header">
        <div class="header-title">
          <h1>我的收藏</h1>
          <div class="header-actions">
            <button class="edit-btn" @click="allYichu()">全部移除</button>
          </div>
        </div>
      </div>


      <!-- Main Content -->
      <div class="main-content">
        <!-- Left Content - Book List -->
        <div class="left-content">
          <div class="book-list" v-show="books.length !==0">
            <div class="book-item" v-for="(book, index) in books" :key="index">
              <div class="book-cover">
                <img :src="book.image">
              </div>
              <div class="book-info">
                <div class="book-title-row">
                  <h2 class="book-title">{{ book.title }}</h2>
                  <span class="book-tag">新</span>
                </div>
                <div class="book-meta">
                  <span>{{ book.author }}</span>
                  <span>{{ book.sort }}</span>
                </div>
                <div class="book-desc">{{ book.contents }}</div>
                <div class="book-stats">
                  <span>{{ book.zishu }}字</span>
                  <span>更新时间：{{ book.time }}</span>
                  <span>已更新至：{{ book.new }}</span>
                </div>
                <div class="book-actions">
                  <button class="read-btn" @click="readMore(book.id)">继续阅读</button>
                  <button class="remove-btn" @click="RemoveBookshelf(book.id,index)">移出收藏</button>
                </div>
              </div>
            </div>
          </div>
          <h2 v-show="books.length==0" style="text-align: center; color: #ccc; margin-top: 10%;">收藏空空如也，快去找几本喜欢的吧</h2>
        </div>

        <!-- Right Content - Recommendations -->
        <div class="right-content">
          <div class="recommendations">
            <h2 class="section-title">猜你喜欢</h2>
            <div class="recommendation-list">
              <div class="recommendation-item" v-for="(item, index) in recommendations" :key="index" @click="$router.push('/BookDetails/'+item.id)">
                <img :src="item.image" class="recommendation-cover">
                <div class="recommendation-info">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.author }}</p>
                  <p class="recommendation-desc">{{ item.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      books: [
      ],
      recommendations: [
      ]
    }
  },
  mounted(){
     axios.post('/api/index/tuijian')
        .then(response => {
          console.log(response.data);
          this.recommendations = response.data.data.tuijian;
        })
        .catch(error => {
          console.error('Error fetching book details:', error);
        });
    this.Xuanran();
    
  },
  methods:{
    //请求渲染数据
    Xuanran(){
      axios.post('/api/index/shujianum', {
          phone: this.$store.state.dlBoole.phone // 传递手机号
        })
        .then(response => {
          console.log('Bookshelf data fetched successfully:', response.data.xinxi);
          this.books = response.data.xinxi;
        })
        .catch(error => {
          console.error('Error fetching bookshelf data:', error);
        });
    },
    //继续阅读，跳转详情页
    readMore(id){
      this.$router.push(`/BookDetails/${id}`)
    },
    //移除收藏中某个书本
    RemoveBookshelf(id,index){
      console.log(index)
      axios.post('/api/index/yichu',{
        phone:this.$store.state.dlBoole.phone,//手机号
        novelid:id,//书本id
      })
       .then(response => {
          if(response.data.code == 1){
             this.$message({
              message: `${response.data.msg}`,
              type: 'success',
              duration:1000
            });
            this.books.splice(index,1)
          }else{
            this.$message({
              message: `￥${response.data.msg}`,
              type: 'success',
              duration:1000
            });
          }
          // console.log('移除信息：', response);
        })
        .catch(error => {
          console.error('移除信息失败：', error);
        });
    },
    //全部移除
    allYichu(){
      if(this.books.length>0){
        axios.post('/api/index/shujiaall',{
          phone:this.$store.state.dlBoole.phone,//手机号
        })
        .then(response => {
            if(response.data.code == 1){
              this.$message({
                message: `${response.data.msg}`,
                type: 'success',
                duration:1000
              });
              this.books=[]
            }else{
              this.$message({
                message: `${response.data.msg}`,
                type: 'error',
                duration:1000
              });
            }
            // console.log('移除信息：', response);
          })
          .catch(error => {
            console.error('移除信息失败：', error);
          });
      }else{
        this.$message({
          message: `暂无收藏`,
          type: 'error',
          duration:1000
        });
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.Box_bj {
  width: 100%;
  min-height: 90vh;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #f0faff, #fff9f9);
}

.bookshelf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1 {
      font-size: 24px;
      color: #333;
      margin: 0;
    }

    .header-actions {
      display: flex;
      gap: 10px;

      button {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;

        &.sort-btn {
          background: #f0f0f0;
          color: #666;

          &:hover {
            background: #e0e0e0;
          }
        }

        &.edit-btn {
          background: #b63228;
          color: #fff;

          &:hover {
            background: #a12a22;
          }
        }
      }
    }
  }
}

.main-content {
  display: flex;
  gap: 20px;
}

.left-content {
  flex: 1;
}

.book-list {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.book-item {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }

  .book-cover {
    width: 140px;
    height: 180px;
    margin-right: 20px;
    overflow: hidden;
    box-shadow: 0 0 8px 0 rgb(143, 143, 143);
    border-radius: 4px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .book-info {
    flex: 1;

    .book-title-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .book-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0;
        margin-right: 10px;
      }

      .book-tag {
        background: #ff4d4f;
        color: #fff;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 12px;
      }
    }

    .book-meta {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;

      span {
        margin-right: 15px;
      }
    }

    .book-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .book-stats {
      font-size: 13px;
      color: #999;
      margin-bottom: 12px;

      span {
        margin-right: 15px;
      }
    }

    .book-actions {
      display: flex;
      gap: 10px;

      button {
        padding: 6px 16px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;

        &.read-btn {
          background: #b63228;
          color: #fff;
          border: none;

          &:hover {
            background: #a12a22;
          }
        }

        &.remove-btn {
          background: #fff;
          color: #666;
          border: 1px solid #d9d9d9;

          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}

.right-content {
  width: 280px;
  flex-shrink: 0;
}

.recommendations {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 18px;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .recommendation-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .recommendation-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    .recommendation-cover {
      width: 60px;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
      box-shadow: 0 0 8px 0 #999;
    }

    .recommendation-info {
      flex: 1;

      h3 {
        font-size: 14px;
        color: #333;
        margin: 0 0 5px 0;
      }

      p {
        font-size: 12px;
        color: #666;
        margin: 0 0 5px 0;
      }

      .recommendation-desc {
        font-size: 12px;
        color: #999;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}
</style>
